<template>
  <div class="lab-detail-wrapper">
    <div class="report-main">
      <div class="lab-detail-header">
        <div class="header-info">
          <img class="info-img" src="@/assets/images/detail-title-icon.png" />
          <div class="info-content">
            <div class="title">
              {{ reportData?.student_name_from_user }}的实验作业
            </div>
            <div class="desc">
              <p>
                实验名称：{{ name }} <span class="line"></span> 实验日期：{{
                  reportData?.updated
                }}
                <span class="line"></span> 学院：{{ reportData?.college }}
              </p>
              <p>
                姓名：{{ reportData?.student_name_from_user }}
                <span class="line"></span> 学号：{{ reportData?.student_no }}
                <span class="line"></span> 专业：{{ reportData?.major }}
                <span class="line"></span> 班级：{{ reportData?.class_name }}
                <span class="line"></span> 组号：{{ reportData?.group_no }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="lab-detail-body">
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验目的</div>
          </div>
          <div class="report-content">
            <div v-html="reportData?.objective"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验仪器和器材</div>
          </div>
          <div class="report-content">
            <div v-html="reportData?.instrument_equipment"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验原理</div>
          </div>
          <div class="report-content">
            <div v-html="reportData?.principle"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验步骤</div>
          </div>
          <div class="report-content">
            <div v-html="reportData?.steps"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">数据记录</div>
          </div>
          <div class="report-content">
            <div v-html="reportData?.data_records"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验结果</div>
          </div>
          <div class="report-content">
            <div v-html="reportData?.result"></div>
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">误差分析</div>
          </div>
          <div class="report-content">
            <div v-html="reportData?.error_analysis"></div>
          </div>
        </div>
        <div class="report-column" v-if="reprotData &&reprotData.report_think_list && reprotData.report_think_list.length>0">
          <div class="report-title">
            <div class="title-text">思考题</div>
          </div>
          <div class="report-content">
            <div
              class="report-col"
              v-for="(item, index) in reprotData.report_think_list"
              :key="index"
            >
              <div class="col-title">{{ item.think_title }}</div>
              <div v-html="item.think_content"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="report-sider">
      <div class="form-box">
        <div class="form-title">作业评分</div>
        <a-form
          layout="vertical"
          ref="formRef"
          :model="formState"
          :rules="rules"
          @finish="handleRate"
        >
          <a-form-item label="实验评分" name="finnal_score">
            <a-input-number
              style="width: 100%"
              :disabled="isEdit === 'false'"
              v-model:value="formState.finnal_score"
              placeholder="请输入得分"
            />
          </a-form-item>
          <a-form-item label="简评" name="brief">
            <a-textarea
              show-count
              :disabled="isEdit === 'false'"
              style="height: 200px"
              :maxlength="500"
              v-model:value="formState.brief"
              placeholder="请输入简评内容"
            />
          </a-form-item>
          <a-button
            type="primary"
            v-if="isEdit == 'true'"
            style="width: 100%"
            html-type="submit"
            >实验评分</a-button
          >
        </a-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import API from "@/api/user";
import { message } from "ant-design-vue";
const router = useRouter();
const query = computed(() => router.currentRoute.value.query);
const formState = ref({
  finnal_score: "",
  brief: "",
});
const name = computed(() => query.value.name);
const isEdit = computed(() => query.value.isEdit);
const reportData = ref();
const getData = async () => {
  let params = {
    report_id: query.value.id,
  };
  const res = await API.ReportFetchModel(params);
  reportData.value = res;
  if (isEdit.value == "false") {
    if (
      res?.report_score != null &&
      res?.report_score.finnal_score !== "" &&
      res?.report_score.brief !== ""
    ) {
      formState.value = res?.report_score;
    }
  }
};
const formRef = ref();
const validate1 = async (_rule, value) => {
  if (value === "") {
    return Promise.reject("请输入得分");
  } else {
    return Promise.resolve();
  }
};
const validate2 = async (_rule, value) => {
  if (value === "") {
    return Promise.reject("请输入简评内容");
  } else {
    return Promise.resolve();
  }
};
const rules = {
  finnal_score: [{ validator: validate1, trigger: "change" }],
  brief: [{ validator: validate2, trigger: "change" }],
};
const handleRate = async () => {
  formRef.value.validate().then(async () => {
    let params = {
      report_id: reportData.value.report_id,
      user_id: reportData.value.user_id,
      ...formState.value,
    };
    await API.ReportScoreCreate(params);
    message.success("评分成功");
    router.go(-1);
  });
};
onMounted(async () => {
  await getData();
});
</script>
<style scoped lang="less">
.lab-detail-wrapper {
  display: flex;
  height: 100%;
  justify-content: space-between;
  .report-main {
    display: flex;
    flex: 1;
    padding: 0 16px 16px;
    height: 100%;
    background: #fff;
    flex-direction: column;
  }
  .report-sider {
    width: 328px;
    margin-left: 12px;
    .form-box {
      width: 328px;
      padding: 0 16px;
      height: 416px;
      background: #ffffff;
      .form-title {
        width: 296px;
        height: 56px;
        border-bottom: 1px solid #bec4ca;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        line-height: 56px;
        color: #333333;
        text-align: left;
        font-style: normal;
        margin-bottom: 16px;
      }
    }
  }
  .lab-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    .header-info {
      display: flex;
      align-items: center;
      .info-img {
        width: 60px;
        height: 60px;
        margin-right: 20px;
      }
      .info-content {
        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #333333;
          line-height: 30px;
          text-align: left;
          font-style: normal;
          margin-bottom: 2px;
        }
        .desc {
          p {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            line-height: 20px;
            text-align: left;
            margin: 0;
            font-style: normal;
            display: flex;
            align-items: center;
            .line {
              width: 1px;
              height: 8px;
              margin: 0 12px;
              background: #bec4ca;
            }
          }
        }
      }
    }
  }
  .lab-detail-body {
    display: flex;
    flex: 1;
    background: #f8f8f8;
    padding: 16px;
    overflow: auto;
    flex-direction: column;
    .report-column {
      .report-content {
        padding-bottom: 36px;
        .report-col {
          padding-bottom: 18px;
          .col-title {
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            font-size: 16px;
            color: #262626;
            line-height: 16px;
            margin-bottom: 12px;
          }
        }
      }
      .column-content {
        padding-bottom: 16px;
        .report-col {
          padding-bottom: 18px;
          .col-title {
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            font-size: 16px;
            color: #262626;
            line-height: 16px;
            margin-bottom: 12px;
          }
        }
      }
    }
  }
}
</style>
